<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Ajax Events Test</title>
      <link rel="stylesheet" href="../css/main.css" />
      <style>
         #log
         {
            height: 200px;
            width: 300px;
            margin: 1em 0;
            display: block;
            overflow-y: scroll;
            border: 1px solid #333333;
            line-height: 1.3em;
         }
      </style>
   </head>
   <body>
      <label for="count-control"># of requests</label>:
      <input type="text" id="count-control" size="3" value="1" />

      <button data-url="some-resource">Good request</button>
      <button data-url="bad-resource">Bad request</button>

      <textarea id="log"></textarea>
      <button id="clear-log">Clear log</button>

      <script src="../js/jquery-1.11.3.min.js"></script>
      <script>
         var $log = $('#log');
         $(document).on(
                 'ajaxStart ajaxStop ajaxSend ajaxSuccess ajaxError ajaxComplete',
                 function(event) {
                    $log.text($log.text() + event.type + '\n');
                 }
         );

         $('button:not(#clear-log)').click(function(event) {
            var count = parseInt($('#count-control').val());
            for (var i = 0; i < count; i++) {
               $.get($(event.target).data('url'));
            }
         });

         $('#clear-log').click(function() {
            $('#log').text('');
         });
      </script>
   </body>
</html>
